<template>

    <ElRow :gutter="20" :class="prefixCls">
        <ElCol :xl="8" :lg="8" :md="12" :sm="12" :xs="24" >
            <template #default>
                <div :class="`${prefixCls}__item flex justify-end`">
                    <ElUpload class="avatar-uploader"
                              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                              :show-file-list="false"
                              :on-success="handleAvatarSuccess"
                              :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <ElIcon v-else class="avatar-uploader-icon" size="50">
                            ＋
                        </ElIcon>
                    </ElUpload>
                </div>
            </template>
        </ElCol>
        <ElCol :xl="12" :lg="12" :md="12" :sm="12" :xs="24" >
            <template #default>
                <div :class="`${prefixCls}__item flex`">
                    <ElForm ref="ruleFormRef"
                            :model="ruleForm"
                            :rules="rules"
                            label-width="120px"
                            class="demo-ruleForm">
                        <ElFormItem label="账户：">
                            <ElInput v-model="ruleForm.name" disabled/>
                        </ElFormItem>
                        <ElFormItem label="Email：">
                            <ElInput v-model="ruleForm.Email" disabled/>
                        </ElFormItem>
                        <ElFormItem label="新密码" prop="pass">
                            <InputPassword v-model="ruleForm.pass" type="password"  strength/>
                        </ElFormItem>
                        <ElFormItem label="确认密码" prop="checkPass">
                            <InputPassword v-model="ruleForm.checkPass" type="password"/>
                        </ElFormItem>
                        <ElFormItem>
                            <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
                            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                        </ElFormItem>
                    </ElForm>
                </div>
            </template>
        </ElCol>
    </ElRow>
</template>

<script lang="ts" setup>
    import { reactive,ref } from 'vue'
    import {ElForm,ElFormItem,ElButton,ElInput,ElMessage,ElUpload,ElIcon,ElRow,ElCol,FormInstance } from 'element-plus'
    import type { UploadProps } from 'element-plus'
    import { useDesign } from '@/hooks/web/useDesign'
    import { InputPassword } from '@/components/InputPassword'
    import { useValidator } from '@/hooks/web/useValidator'
    import { useForm } from '@/hooks/web/useForm'
    import {uppassword} from '@/api/login'

    const { register, elFormRef } = useForm()
    const { required } = useValidator()
    const { getPrefixCls } = useDesign()
    const prefixCls = getPrefixCls('panel')
    const imageUrl = ref('')
    const ruleFormRef = ref<FormInstance>()

    const validatePass = (rule: any, value: any, callback: any) => {
        if (value === '') {
            callback(new Error('请输入密码'))
        } else {
            if (ruleForm.checkPass !== '') {
                if (!ruleFormRef.value) return
                ruleFormRef.value.validateField('checkPass', () => null)
            }
            callback()
        }
    }
    const validatePass2 = (rule: any, value: any, callback: any) => {
        if (value === '') {
            callback(new Error('请重新输入密码'))
        } else if (value !== ruleForm.pass) {
            callback(new Error("两个输入不匹配！"))
        } else {
            callback()
        }
    }

    var user = sessionStorage.getItem("user");
    var userdui = JSON.parse(user);

    const ruleForm = reactive({
        name:userdui.account,
        Email:userdui.email,
        pass: '',
        checkPass: ''
    })
    //触发
    const rules = reactive({
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }]
    })

    //提交
    const submitForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.validate((valid) => {
            if (valid) {//true
                uppassword(userdui.user_id,ruleForm.pass).then(()=>{

                })
            } else {
                console.log('error submit!')
                return false
            }
        })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }

//上传头像
    const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
        imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    }

    const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
        if (rawFile.type !== 'image/jpeg') {
            ElMessage.error('Avatar picture must be JPG format!')
            return false
        } else if (rawFile.size / 1024 / 1024 > 2) {
            ElMessage.error('Avatar picture size can not exceed 2MB!')
            return false
        }
        return true
    }
</script>
<style scoped>

    .avatar-uploader .avatar {
        width: 230px;
        height: 230px;
        display: block;
    }

     .el-row {
        margin-top: 100px;
        display: flex;
        flex-wrap: wrap
    }
</style>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #2d8cff;
        width: 230px;
        height: 230px;
        text-align: center;
    }
</style>
